
// 商品展示
// 联名款
const str = [
    { url: '../img/pastry/pastry-1.jpg', p: '爱情就像一场赌局，输赢都是自己的心在承受', price: '¥ 59.00' },
    { url: '../img/pastry/pastry-2.jpg', p: '爱情让人变得脆弱，失去自我，成为别人的附庸', price: '¥ 59.00' },
    { url: '../img/pastry/pastry-3.jpg', p: '爱情是一场幻觉，让人迷失方向，最终落得个孤独终老的下场', price: '¥ 59.00' },
    { url: '../img/pastry/pastry-4.jpg', p: '爱情是一种奢侈品，只有少数人才能拥有，大多数人只能望而却步', price: '¥ 59.00' },
    { url: '../img/pastry/pastry-5.jpg', p: '爱情是一种毒药，让人沉迷其中，无法自拔', price: '¥ 59.00' },
    { url: '../img/pastry/pastry-6.jpg', p: '爱情是一种束缚，让人失去了自由和独立', price: '¥ 59.00' },
    { url: '../img/pastry/pastry-7.jpg', p: '爱情是世间最美好的情感，让人感受到生命的温暖和幸福', price: '¥ 59.00' },
    { url: '../img/pastry/pastry-8.jpg', p: '爱情是一种力量，能够战胜一切困难和挑战，让人们变得更加坚强和勇敢', price: '¥ 59.00' },
    { url: '../img/pastry/pastry-9.jpg', p: '爱情是一种灵魂的契合，让人们在彼此的陪伴中找到了真正的自我', price: '¥ 59.00' },
    { url: '../img/pastry/pastry-10.jpg', p: '爱情是一种奉献，让人们愿意为对方付出一切，包括时间、精力和生命', price: '¥ 59.00' },
    { url: '../img/pastry/pas-12.jpg', p: '爱情是一种成长，让人们在相互理解和包容中不断进步和完善自己', price: '¥ 59.00' },
    { url: '../img/pastry/pastry-12.jpg', p: ' 爱情是一种永恒，即使时间和空间的距离再遥远，也无法阻挡人们对彼此的思念和牵挂', price: '¥ 59.00' }

]
// 零食糕点
const pas = [
    { url: '../img/pastry/pas-01.jpg', p: '情如纸薄易撕裂，缘似线细难牵系', price: '¥ 4240.00' },
    { url: '../img/pastry/pas-02.jpg', p: '长太息以掩涕兮，哀民生之多艰', price: '¥ 1520.00' },
    { url: '../img/pastry/pas-03.jpg', p: '十年生死两茫茫，不思量，自难忘', price: '¥ 250.00' },
    { url: '../img/pastry/pas-04.jpg', p: '雕栏玉砌应犹在，只是朱颜改', price: '¥ 220.00' },
    { url: '../img/pastry/pas-05.jpg', p: '东风夜放花千树，更吹落、星如雨', price: '¥ 410.00' },
    { url: '../img/pastry/pas-06.jpg', p: '曾经沧海难为水，除却巫山不是云', price: '¥ 1530.00' },
    { url: '../img/pastry/pas-07.jpg', p: '世情薄，人情恶，雨送黄昏花易落', price: '¥ 120.00' },
    { url: '../img/pastry/pas-08.jpg', p: '天长地久有时尽，此恨绵绵无绝期', price: '¥ 1140.00' },
    { url: '../img/pastry/pas-09.jpg', p: '寻寻觅觅，冷冷清清，凄凄惨惨戚戚', price: '¥ 240.00' },
    { url: '../img/pastry/pas-10.jpg', p: '离离原上草，一岁一枯荣', price: '¥ 640.00' },
    { url: '../img/pastry/pas-11.jpg', p: '滚滚长江东逝水，浪花淘尽英雄', price: '¥ 460.00' },
    { url: '../img/pastry/pas-12.jpg', p: '爱已成灰泪已干，此生无缘再相见', price: '¥ 4246.00' },
]
// 面包土司
const bre = [
    { url: '../img/pastry/Bread-01.jpg', p: '小方土司', price: '¥ 10.00' },
    { url: '../img/pastry/Bread-02.jpg', p: '玫瑰切片蛋糕', price: '¥ 18.00' },
    { url: '../img/pastry/Bread-03.jpg', p: '卡通吐司', price: '¥ 10.00' }
]
// 零食中点
const sna = [
    { url: '../img/pastry/snack-01.jpg', p: '鲜花饼', price: '¥ 45.00' },
    { url: '../img/pastry/snack-02.jpg', p: '葡萄奶酥', price: '¥ 16.00' },
    { url: '../img/pastry/snack-03.jpg', p: '忘忧蛋黄酥', price: '¥ 1060.00' },
    { url: '../img/pastry/snack-04.jpg', p: '解忧竹竹', price: '¥ 15.00' },
    { url: '../img/pastry/snack-05.jpg', p: '锦韵茶糕', price: '¥ 106.00' },
    { url: '../img/pastry/snack-06.jpg', p: '蛋黄水滴', price: '¥ 12.00' },
    { url: '../img/pastry/snack-07.jpg', p: '何以忘忧', price: '¥ 1000.00' },
    { url: '../img/pastry/snack-08.jpg', p: '小方故事', price: '¥ 256.00' },
    { url: '../img/pastry/snack-09.jpg', p: '一地鸡毛', price: '¥ 1.00' },
    { url: '../img/pastry/snack-10.jpg', p: '双博流泪', price: '¥ 1005.00' },
]
// 巧克力
const cho = [
    { url: '../img/pastry/pastry-1.jpg', p: '可口可乐联名限定 蒲公英空气巧克力', price: '¥ 59.00' },
    { url: '../img/pastry/chocolate-02.jpg', p: '咖啡豆巧', price: '¥ 38.00' },
    { url: '../img/pastry/chocolate-03.jpg', p: '生巧克力', price: '¥ 69.00' },
    { url: '../img/pastry/chocolate-04.jpg', p: '蒲公英空气巧克力', price: '¥ 59.00' },
]
function pages(a) {
    // 获取父节点
    const page = document.querySelector('.goods-page');
    // 清空调用的数据
    page.innerHTML = ''
    // 循环数据
    for (let item of a) {
        // 创建goods
        const goods = document.createElement('div');
        // 创建img
        const img = document.createElement('img');
        // 创建goods-card-info盒子
        const div0 = document.createElement('div');
        //将goods的子盒子塞进来
        goods.append(img);
        goods.append(div0);
        //给goods添加类名
        goods.classList.add('goods-card');
        //给创建goods-card-info盒子里面添加两个div
        const left = document.createElement('div');
        const right = document.createElement('div');
        // 将这两个盒子塞进div0中
        div0.append(left);
        div0.append(right);
        //在left中添加两个div
        const title = document.createElement('div');
        const price = document.createElement('div');
        left.append(title);
        left.append(price);
        //在price盒子中加入俩个span 
        const basePrice = document.createElement('span');
        const extra = document.createElement('span');
        price.append(basePrice);
        price.append(extra);
        //在right盒子中加入一个div 和一个按钮
        const blank = document.createElement('div');
        const btn = document.createElement('button')
        right.append(blank);
        right.append(btn);
        //图片加地址
        img.src = item.url
        //给goods-card-info加类名
        div0.classList.add('goods-card-info');

        //给left加类名
        left.classList.add('left');
        // 给title加类名
        title.classList.add('title');
        // 给price加类名
        price.classList.add('price');
        // 给base-price加类名
        basePrice.classList.add('price');
        // 给extra加类名
        extra.classList.add('extra');
        // 给right加类名
        right.classList.add('right');
        // 给btn加类名
        btn.classList.add('btn');


        // 给title文字修改
        title.innerHTML = `${item.p}`;
        // console.log(title);
        //给base-price 渲染价格
        basePrice.innerHTML = `${item.price}`;
        extra.innerHTML = '起';
        btn.innerHTML = '购买'


        page.append(goods)

    }

}
// 调用渲染
pages(str);

//扛扛
const one = document.querySelector('.active-one')
const two = document.querySelector('.active-two')
const three = document.querySelector('.active-three')
const four = document.querySelector('.active-four')
const five = document.querySelector('.active-five')
// 阴影
const a = document.querySelector('.mask-one')
const b = document.querySelector('.mask-two')
const c = document.querySelector('.mask-three')
const d = document.querySelector('.mask-four')
const e = document.querySelector('.mask-five')

// 零食糕点点击事件
const pastry = document.querySelector('.pastry');
pastry.addEventListener('click', function () {
    pages(pas);
    two.classList.add('active')
    one.classList.remove('active')
    three.classList.remove('active')
    four.classList.remove('active')
    five.classList.remove('active')

    b.classList.add('mask')
    a.classList.remove('mask')
    c.classList.remove('mask')
    d.classList.remove('mask')
    e.classList.remove('mask')

})
// 联名款点击事件
const series = document.querySelector('.series');
series.addEventListener('click', function () {
    pages(str);
    two.classList.remove('active')
    one.classList.add('active')
    three.classList.remove('active')
    four.classList.remove('active')
    five.classList.remove('active')

    b.classList.remove('mask')
    a.classList.add('mask')
    c.classList.remove('mask')
    d.classList.remove('mask')
    e.classList.remove('mask')
})
// 面包土司点击事件
const Bread = document.querySelector('.Bread');
Bread.addEventListener('click', function () {
    pages(bre);
    two.classList.remove('active')
    one.classList.remove('active')
    three.classList.add('active')
    four.classList.remove('active')
    five.classList.remove('active')

    b.classList.remove('mask')
    a.classList.remove('mask')
    c.classList.add('mask')
    d.classList.remove('mask')
    e.classList.remove('mask')

}
)
// 零食中点点击事件
const Snack = document.querySelector('.Snack');
Snack.addEventListener('click', function () {
    pages(sna);

    two.classList.remove('active')
    one.classList.remove('active')
    three.classList.remove('active')
    four.classList.add('active')
    five.classList.remove('active')

    b.classList.remove('mask')
    a.classList.remove('mask')
    c.classList.remove('mask')
    e.classList.add('mask')
    d.classList.remove('mask')
})
// 巧克力点击事件
const Chocolate = document.querySelector('.Chocolate');
Chocolate.addEventListener('click', function () {
    pages(cho);

    two.classList.remove('active')
    one.classList.remove('active')
    three.classList.remove('active')
    four.classList.remove('active')
    five.classList.add('active')

    b.classList.remove('mask')
    a.classList.remove('mask')
    c.classList.remove('mask')
    d.classList.add('mask')
    e.classList.remove('mask')
})